<template>
    <el-container class="">
        <!--  -->
        <el-header class="header" height>
            <div class="header_infor" ref="headerback">
                <div class="zs_header_content_left_item1">

                    <div class="homeicon">
                        <img class="gohome" @click="$router.push('/home')" src="../../assets/dataimg/home.svg" alt="">
                    </div>
                    <div>
                        <el-select class="selectdiv" v-model="value" size="mini" @change="selectdivchange"
                            placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                </div>
                <div class="ptname">{{value}}</div>
                <div class="zs_header_content_left_item2">

                    <el-select style="margin-right: 20px;" v-if="value=='智能运营分析'" class="select60div"
                        v-model="znDatestatus" size="mini" placeholder="请选择">
                        <el-option label="月" value="月"></el-option>
                        <el-option label="年" value="年"></el-option>
                    </el-select>
                    <el-date-picker style="margin-right: 30px;" class="datepicker120px"
                        v-if="value=='综合分析' || value=='资源效率分析'" size="mini" v-model="value2" type="month"
                        placeholder="选择月">
                    </el-date-picker>

                    <div v-if="value=='智能运营分析' && znDatestatus == '年'" style="margin-right: 30px;">
                        <el-date-picker class="datepicker120px" size="mini" v-model="yearvalue1" type="year"
                            placeholder="选择开始年份">
                        </el-date-picker>
                        --
                        <el-date-picker class="datepicker120px" size="mini" v-model="yearvalue2" type="year"
                            placeholder="选择结束年份">
                        </el-date-picker>
                    </div>
                    <div v-if="value=='智能运营分析' && znDatestatus == '月'" style="margin-right: 30px;">
                        <el-date-picker class="datepicker120px" size="mini" v-model="monthvalue1" type="month"
                            placeholder="选择开始份">
                        </el-date-picker>
                        <span>--</span>
                        <el-date-picker class="datepicker120px" size="mini" v-model="monthvalue2" type="month"
                            placeholder="选择开始份">
                        </el-date-picker>
                    </div>

                </div>
            </div>
        </el-header>
        <el-main class="main">
            <!-- 综合分析 -->
            <div class="content" v-if="value=='综合分析'">
                <div class="left_box">
                    <div class="left_data_box" v-for=" (item,index) in zhfxData">
                        <div class="img_box">
                            <img :src="item.imgUrl" alt="" />
                        </div>
                        <div class="shuju_box">
                            <div class="contentname"> {{item.contentname}}</div>
                            <div class="data_jiantou">
                                <div>
                                    <div class="baifenbi">{{item.baifenbi}}</div>
                                    <div class="dataunit"> {{item.dataunit}}</div>
                                </div>
                                <div>
                                    <img :src="item.sjurl" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="jixian">
                            <div class="jixianname"> {{item.jixianname}}</div>
                        </div>
                        <div class="bijiaosj">
                            <div class="yuji">{{item.yuji}}</div>
                            <div>{{item.jieyue}} <img height="15px" :src="item.sjurl" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="right_box">
                    <div class="right_content_box">
                        <div class="content_top">
                            <div class="icon_data" v-for="item in zhfxRightTop">
                                <div class="rimg_box">
                                    <img :src="item.url" alt="">
                                </div>
                                <div class="rshuju">
                                    <div class="one_font font_box">{{item.name}}</div>
                                    <div class="tow_font font_box">{{item.shu}}</div>
                                    <div class="tow_font font_box">{{item.danwei}}</div>
                                    <div class="three_font font_box">{{item.xiangbi}}</div>
                                    <div class="four_font font_box">{{item.baifenbi}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="line"> </div>
                        <div class="content_bottom">
                            <div class="co2img">
                                <img src="../../assets/dataimg/co2.svg" alt="">
                            </div>

                            <div class="font24_box">
                                <div class="font24 fontone24">CO2 总排放量</div>
                                <div class="font24 ">4,178,076.1T</div>
                                <div class="yuan_line">
                                    <div class="yuan">
                                        <div style="margin-top: 4px;font-size: 24px;">1</div>
                                    </div>
                                    <div class="font24" style="margin-left: 87px;">CO2排放量-食堂</div>
                                </div>
                                <div class="font24">15.6%</div>
                                <div class="font24">651,779.9T</div>
                                <div class="yuan_line">
                                    <div class="yuan">
                                        <div style="margin-top: 4px;font-size: 24px;">2</div>
                                    </div>
                                    <div class="font24" style="margin-left: 65px;">CO2排放量-北宿舍区</div>
                                </div>
                                <!-- <div class=""></div> -->
                                <div class="font24">8.9%</div>
                                <div class="font24">371,848.8T</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 综合分析 end-->
            <!-- 服务质量分析 -->
            <div class="fwzlcontent" v-if="value=='服务质量分析'">

                <div class="fwzlcontent_top">
                    <div class="snhj">
                        <div class="lablename">室内环境</div>
                        <div class="snhjcontent">
                            <div class="snhjcontentl">
                                <div class="snhjdatas">
                                    <div class="imgdiv"><img src="../../assets/dataimg/wendu.svg" alt=""></div>
                                    <span>温度：20℃</span>
                                </div>
                                <div class="snhjdatas">
                                    <div class="imgdiv"><img src="../../assets/dataimg/shidu.svg" alt=""></div>
                                    <span>湿度：50%RH</span>
                                </div>
                                <div class="snhjdatas">
                                    <div class="imgdiv"><img src="../../assets/dataimg/PM2.5.svg" alt=""></div>
                                    <span>PM2.5：34ug/m³</span>
                                </div>
                                <div class="snhjdatas">
                                    <div class="imgdiv"><img src="../../assets/dataimg/CO21.svg" alt=""></div>
                                    <span>二氧化碳：500PPM</span>
                                </div>
                                <div class="snhjdatas">
                                    <div class="imgdiv"><img src="../../assets/dataimg/tfl.svg" alt=""></div>
                                    <span>通风率：15m³/㎡h</span>
                                </div>
                            </div>
                            <div class="snhjcontentr">
                                <div class="ybecharts" id="ybecharts" key="MyEcharts1" ref="ybecharts"></div>
                                <div class="wdblables">
                                    <div class="fklable">
                                        <div class="fangkuai1"></div><span>寒冷</span>
                                    </div>
                                    <div class="fklable">
                                        <div class="fangkuai2"></div><span>舒适</span>
                                    </div>
                                    <div class="fklable">
                                        <div class="fangkuai3"></div><span>炎热</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="dtddsj">
                        <div class="lablename">电梯等待时间</div>
                        <div class="dtddsjzxt" id="dtddsjzxt" key="MyEcharts2" ref="dtddsjzxt">

                        </div>
                    </div>
                    <div class="tingchechang">
                        <div class="lablename">停车场</div>
                        <div class="tcccontent">
                            <div class="lyorsy">
                                <div><img src="../../assets/dataimg/liyonglu.svg" alt=""></div>
                                <div>利用率</div>
                                <div>86%</div>
                            </div>
                            <div class="lyorsy">
                                <div><img src="../../assets/dataimg/shiyonglu.svg" alt=""></div>
                                <div>使用率</div>
                                <div>71%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fwzlcontent_bottom">
                    <div class="znzm">
                        <div class="lablename">智能照明平均照度</div>
                        <div>
                            <div class="table">
                                <div class="tabledanwei">单位：lx</div>
                                <el-table size="medium" :data="tableData" border>
                                    <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                    <el-table-column align="center" label="平均照度" prop="sudu"></el-table-column>
                                    <el-table-column align="center" label="标准照度" prop="zhaodu"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div class="pjzc">
                        <div class="lablename">平均正常运行时间</div>
                        <div class="pjzcyxsj" id="pjzcyxsj" key="MyEcharts3" ref="pjzcyxsj"> </div>
                    </div>
                </div>

            </div>
            <!-- 服务质量分析End -->
            <!-- 资源效率分析 -->
            <div class="zyxlcontent" v-if="value=='资源效率分析'">
                <div class="zyxl_left">
                    <div class="zyxl_left_one">
                        <div class="mzyxlnrbox">
                            <div style="display: flex;align-items: center;" v-for=" (item,index) in zyxlfxdata1"
                                :key="index">
                                <div class="zyxlnrbox width320">
                                    <div>{{item.name}}</div>
                                    <div>{{item.number}}</div>
                                    <div class="luse fontsize16">与上年同月相比</div>
                                    <div class="luse">{{item.fudu}}</div>
                                </div>
                                <div class="fgxian" v-if="index!=3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="zyxl_left_two">
                        <div class="mzyxlnrbox">
                            <div style="display: flex;align-items: center;" v-for=" (item,index) in zyxlfxdata2"
                                :key="index">
                                <div class="zyxlnrbox width440">
                                    <div>{{item.name}}</div>
                                    <div>{{item.number}}</div>
                                    <div class="luse fontsize16">与上年同月相比</div>
                                    <div class="luse">{{item.fudu}}</div>
                                </div>
                                <div class="fgxian" v-if="index!=2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="zyxl_left_three">
                        <div class="three_box1">
                            <div class="lablename">电能耗top</div>
                            <div style="display: flex;">
                                <div class="dnhl">
                                    <div class="anxitong">
                                        <div class="tabledanwei">按系统</div>
                                        <el-table size="medium" :data="nxttableData" border>
                                            <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                            <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                                        </el-table>
                                    </div>
                                    <div class="anxitong">
                                        <div class="tabledanwei">按设备</div>
                                        <el-table size="medium" :data="nxttableData1" border>
                                            <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                            <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                <div class="dnhr">
                                    <div class="anxitong">
                                        <div class="tabledanwei">按区域</div>
                                        <el-table size="medium" :data="nxttableData2" border>
                                            <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                            <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="three_box2">
                            <div class="lablename">水能耗top</div>
                            <div class="three_box2_data">
                                <div class="anxitong">
                                    <div class="tabledanwei">按区域</div>
                                    <el-table size="medium" :data="nxttableData3" border>
                                        <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                        <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="zyxl_right">
                    <div class="zyxl_right_one">
                        <div class="rrsormj">
                            <div>总人数</div>
                            <div class="luse">22,105</div>
                        </div>
                        <div class="fengexian"></div>
                        <div class="rrsormj">
                            <div>总面积</div>
                            <div class="luse">130 万m²</div>
                        </div>
                    </div>
                    <div class="zyxl_right_tow">
                        <div class="lablename">暖通空调下班后请求小时数</div>
                        <div class="ntktszt" id="ntktszt" key="MyEcharts4" ref="ntktszt"></div>

                    </div>
                    <div class="zyxl_right_three">
                        <div class="lablename">照明下班后请求小时数</div>
                        <div class="zhaoming" id="zhaoming" key="MyEcharts5" ref="zhaoming"></div>
                    </div>
                </div>
            </div>
            <!-- 资源效率分析 End -->
            <!-- 智能运营分析 -->
            <div class="znyycontent" v-if="value=='智能运营分析'">
                <div class="znyy_left">
                    <div class="rfh_box">
                        <div class="lablename">热负荷</div>
                        <div class="znyyrfh" id="znyyrfh" key="MyEcharts6" ref="znyyrfh">
                        </div>
                    </div>
                    <div class="lfjz_box">
                        <div class="lablename">冷水机组能效对</div>
                        <div class="znyylsj" id="znyylsj" key="MyEcharts7" ref="znyylsj">
                        </div>
                    </div>
                    <div class="lfh_box">
                        <div class="lablename">冷负荷</div>
                        <div class="znyylfh" id="znyylfh" key="MyEcharts8" ref="znyylfh"></div>
                    </div>
                    <div class="xfl_box">
                        <div class="lablename">通风率</div>
                        <div class="znyytfl" id="znyytfl" key="MyEcharts9" ref="znyytfl"></div>
                    </div>
                </div>
                <div class="znyy_right">
                    <div class="lablename">利用率top5</div>
                    <div class="liyonglubox">
                        <div class="yuanhuan1" id="yuanhuanid1" key="MyEcharts10" ref="yuanhuanid1"></div>
                        <div class="yhlable">
                            <div class="yhlablediv">视频监控系统</div>
                            <div>91.9%</div>
                        </div>
                        <div class="yhxbtn">
                            <div>于同年同月相比</div>
                            <div>20.4% <img width="auto" height="15px" src="../../assets/dataimg/shangsheng.svg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="liyonglubox">
                        <div class="yuanhuan1" id="yuanhuanid2" key="MyEcharts11" ref="yuanhuanid2"></div>
                        <div class="yhlable">
                            <div class="yhlablediv">电梯监控系统</div>
                            <div>85.3%</div>
                        </div>
                        <div class="yhxbtn">
                            <div>于同年同月相比</div>
                            <div>12.6% <img width="auto" height="15px" src="../../assets/dataimg/shangsheng.svg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="liyonglubox">
                        <div class="yuanhuan1" id="yuanhuanid3" key="MyEcharts12" ref="yuanhuanid3"></div>
                        <div class="yhlable">
                            <div class="yhlablediv">停车场系统</div>
                            <div>71.0% </div>
                        </div>
                        <div class="yhxbtn">
                            <div>于同年同月相比</div>
                            <div>10.5%% <img width="auto" height="15px" src="../../assets/dataimg/shangsheng.svg"
                                    alt=""></div>
                        </div>
                    </div>
                    <div class="liyonglubox">
                        <div class="yuanhuan1" id="yuanhuanid4" key="MyEcharts13" ref="yuanhuanid4"></div>
                        <div class="yhlable">
                            <div class="yhlablediv">冷却系统</div>
                            <div>66.2%</div>
                        </div>
                        <div class="yhxbtn">
                            <div>于同年同月相比</div>
                            <div>8.3% <img width="auto" height="15px" src="../../assets/dataimg/shangsheng.svg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="liyonglubox">
                        <div class="yuanhuan1" id="yuanhuanid5" key="MyEcharts14" ref="yuanhuanid5"></div>
                        <div class="yhlable">
                            <div class="yhlablediv">通风系统</div>
                            <div>65.4%</div>
                        </div>
                        <div class="yhxbtn">
                            <div>于同年同月相比</div>
                            <div>8.7% <img width="auto" height="15px" src="../../assets/dataimg/shangsheng.svg" alt="">
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <!-- 智能运营分析 End -->
        </el-main>
    </el-container>
</template>

<script>
    import * as echarts from 'echarts'
    import ziyuanxiaolv from './ziyuanxiaolv.vue'
    export default {
        components: {
            ziyuanxiaolv
        },
        data() {
            return {
                yearvalue1: new Date(),
                yearvalue2: new Date(),
                monthvalue1: new Date(),
                monthvalue2: new Date(),
                znDatestatus: '月',
                zyxlfxdata1: [
                    { name: '电能耗', number: '5,322,390kWh', fudu: '-10.3%' },
                    { name: '用电成本', number: '3,193,434元', fudu: '-10.3%' },
                    { name: '人均电能耗', number: '240.8kWh', fudu: '-10.3%' },
                    { name: '电能耗强度', number: '4.1kWh/㎡', fudu: '-10.3%' },
                ],
                zyxlfxdata2: [
                    { name: '生活水能耗', number: '120,525m³', fudu: '-27.6%' },
                    { name: '中水能耗', number: '24,105m³', fudu: '24.2%' },
                    { name: '用水成本', number: '361,575元', fudu: '-25.8%' },
                ],
                tableData: [
                    {
                        weizhi: '图书馆',
                        sudu: "308",
                        zhaodu: "300"
                    },
                    {
                        weizhi: '教室',
                        sudu: "352",
                        zhaodu: "300"
                    },
                    {
                        weizhi: '宿舍',
                        sudu: "298",
                        zhaodu: "300"
                    },
                    {
                        weizhi: '办公室',
                        sudu: "302",
                        zhaodu: "300"
                    },
                    {
                        weizhi: '食堂',
                        sudu: "152",
                        zhaodu: "150"
                    },
                    {
                        weizhi: '走廊',
                        sudu: "60",
                        zhaodu: "50"
                    }
                ],
                nxttableData: [{
                    weizhi: '暖通空调',
                    data: "310,901kWh",
                },
                {
                    weizhi: '照明',
                    data: "162,306kWh",
                },
                {
                    weizhi: '视频监控',
                    data: "94,244kWh",
                },
                {
                    weizhi: '送排风',
                    data: "70,533kWh",
                },],
                nxttableData1: [{
                    weizhi: '压缩机组',
                    data: "88,912kWh",
                },
                {
                    weizhi: '风机',
                    data: "12,002kWh",
                },
                {
                    weizhi: '灯',
                    data: "10,466kWh",
                },
                {
                    weizhi: '摄像头',
                    data: "3,983kWh",
                },],
                nxttableData2: [
                    {
                        weizhi: '医科组团',
                        data: "250,199kWh",
                    },
                    {
                        weizhi: '北区食堂',
                        data: "187,500kWh",
                    },
                    {
                        weizhi: '理科组团',
                        data: "99,654kWh",
                    },
                    {
                        weizhi: '北区宿舍',
                        data: "30,888kWh",
                    }, {
                        weizhi: '南区宿舍',
                        data: "29,549kWh",
                    }, {
                        weizhi: '文科组团',
                        data: "23,111kWh",
                    }, {
                        weizhi: '图书馆',
                        data: "18,290kWh",
                    },
                    {
                        weizhi: '大礼堂',
                        data: "13,432kWh",
                    },],
                nxttableData3: [
                    {
                        weizhi: '北区食堂',
                        data: "12,809 m³",
                    },
                    {
                        weizhi: '南区食堂',
                        data: "12,224 m³",
                    },
                    {
                        weizhi: '北区宿舍',
                        data: "10,804 m³",
                    },
                    {
                        weizhi: '南区宿舍',
                        data: "10,476 m³",
                    }, {
                        weizhi: '医科组团',
                        data: "7,326 m³",
                    }, {
                        weizhi: '理科组团',
                        data: "5,777 m³",
                    }, {
                        weizhi: '文科组团',
                        data: "3,843 m³",
                    },
                    {
                        weizhi: '图书馆',
                        data: "731 m³",
                    },],

                value: '综合分析',
                value3: '',
                value2: new Date(),
                options: [{
                    value: '综合分析',
                    label: '综合分析(可持续分析)'
                }, {
                    value: '服务质量分析',
                    label: '服务质量分析'
                }, {
                    value: '资源效率分析',
                    label: '资源效率分析'
                }, {
                    value: '智能运营分析',
                    label: '智能运营分析'
                },],
                zhfxData: [
                    { imgUrl: require('../../assets/dataimg/iso.png'), contentname: '目标：2025年12月达到20%的节能', baifenbi: '-30.2%', dataunit: '-11,654 GJ', sjurl: require('../../assets/dataimg/xiajiang.svg'), jixianname: '基线： 2020 年', yuji: '预计2025年12月', jieyue: '将节约22.0%' },
                    { imgUrl: require('../../assets/dataimg/dianneng.svg'), contentname: '与2021年相比，年初至今实际节省电能', baifenbi: '-18.2%', dataunit: '-1,332,390 kWh', sjurl: require('../../assets/dataimg/xiajiang.svg'), yuji: '与上年同月相比', jieyue: '-25.3%' },
                    { imgUrl: require('../../assets/dataimg/nengyuan.svg'), contentname: '与2021年相比，年初至今实际能源强度', baifenbi: '38.0 kWh/㎡', sjurl: require('../../assets/dataimg/xiajiang.svg'), yuji: '与上年同月相比', jieyue: ' -25.3%' },
                    { imgUrl: require('../../assets/dataimg/ranliao.svg'), contentname: '与2021年相比，年初至今实际节省燃料', baifenbi: '-29.3%', dataunit: '-45,517 kg', sjurl: require('../../assets/dataimg/xiajiang.svg'), yuji: '与上年同月相比', jieyue: '-40.1%' },
                    { imgUrl: require('../../assets/dataimg/yongshui.svg'), contentname: '与2021年相比，年初至今实际节省用水', baifenbi: '-31.5%', dataunit: '-27,165 m³', sjurl: require('../../assets/dataimg/xiajiang.svg'), yuji: '与上年同月相比', jieyue: ' -60.5%' },
                    { imgUrl: require('../../assets/dataimg/shiyongshui.svg'), contentname: '与2021年相比，年初至今实际使用中水', baifenbi: '27.7%', dataunit: '24105 m³', sjurl: require('../../assets/dataimg/shangsheng.svg'), yuji: '与上年同月相比', jieyue: '35.1%' },
                ],
                zhfxRightTop: [
                    { url: require('../../assets/dataimg/lengque.svg'), name: '冷却度日', shu: '33', xiangbi: '与上年同月相比', baifenbi: '-50.3%' },
                    { url: require('../../assets/dataimg/zdw.svg'), name: '最低室外温度', shu: '18.3℃', xiangbi: '与上年同月相比', baifenbi: '-50.3%' },
                    { url: require('../../assets/dataimg/ruzhu.svg'), name: '建筑入驻率', shu: '77.9%', xiangbi: '与上年同月相比', baifenbi: '8.3%' },
                    { url: require('../../assets/dataimg/gongleng.svg'), name: '供冷用总能耗', shu: '16.8%', danwei: '582,553kWh', xiangbi: '与上年同月相比', baifenbi: '-10.3%' },
                ],
                fwoption: {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}℃"
                    },
                    // grid: {
                    //     left: '0%',
                    //     right: '0%',
                    //     bottom: '0%',
                    //     containLabel: true
                    // },
                    series: [
                        {
                            name: "当前温度",
                            type: "gauge",
                            min: -50,
                            max: 50,
                            data: [{ value: 26, name: "温度" }],
                            axisLine: {
                                lineStyle: {
                                    color: [
                                        [0.3333, "#40A3FF"],
                                        [0.6666, "#33FFA6 "],
                                        [1, "#FF5C5C "]
                                    ]
                                }
                            }, detail: {
                                valueAnimation: true,
                                formatter: "{value}℃",
                                fontSize: 20,
                                offsetCenter: [0, '95%']
                            },
                        }
                    ]
                },
                fwoption1: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['平均', '数据']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1号电梯', '2号电梯', '3号电梯', '4号电梯', '5号电梯']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位（min）",
                    },
                    series: [
                        {
                            name: '平均',
                            type: 'line',
                            data: [15, 15, 15, 15, 15],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#33FFA6', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#33FFA6',
                                },
                            },

                        }, {
                            name: '数据',
                            type: 'line',
                            data: [10, 20, 5, 6, 30],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#0E9CFF', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#0E9CFF',
                                },
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [  // 渐变颜色
                                        {
                                            offset: 0,
                                            color: '#0E9CFF',
                                        },
                                        {
                                            offset: 1,
                                            color: '#0E9CFF',
                                        },
                                    ],
                                    global: false,
                                },
                            },
                        },
                    ]
                },
                fwoption2: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['暖通空调', '送排风', '给排水', '电梯', '照明', '电力', '停车场', '视频监控']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位：h",
                    },
                    series: [
                        {
                            data: [40, 88, 60, 39, 34, 39, 71, 85],
                            type: 'bar',
                            itemStyle: {
                                color: '#71C4FF',
                                normal: {
                                    label: {
                                        show: true, //开启显示数值
                                        position: 'top', //数值在上方显示
                                        textStyle: {  //数值样式
                                            color: '#000',   //字体颜色
                                            fontSize: 16  //字体大小
                                        }
                                    }
                                }
                            }
                        }
                    ]
                },
                zyxloption: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['医科组团', '理科组团', '活动中心', '大礼堂', '文科组团']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位：h",
                    },
                    series: [
                        {
                            data: [40, 88, 60, 39, 34],
                            type: 'bar',
                            itemStyle: {
                                color: '#71C4FF',
                                normal: {
                                    label: {
                                        show: true, //开启显示数值
                                        position: 'top', //数值在上方显示
                                        textStyle: {  //数值样式
                                            color: '#000',   //字体颜色
                                            fontSize: 16  //字体大小
                                        }
                                    }
                                }
                            }
                        }
                    ]
                },
                zhaomingoption: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['医科组团', '理科组团', '活动中心', '大礼堂', '文科组团']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位：h",
                    },
                    series: [
                        {
                            data: [130, 100, 70, 70, 30],
                            type: 'bar',
                            itemStyle: {
                                color: '#71C4FF',
                                normal: {
                                    label: {
                                        show: true, //开启显示数值
                                        position: 'top', //数值在上方显示
                                        textStyle: {  //数值样式
                                            color: '#000',   //字体颜色
                                            fontSize: 16  //字体大小
                                        }
                                    }
                                }
                            }
                        }
                    ]
                },
                znyyrfhoption1: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['热负荷', '基线']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021.10', '2021.11', '2021.12', '2022.1', '2022.2', '2022.3', '2022.4', '2022.5', '2022.6', '2022.7', '2022.8', '2022.9']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位 W/m²",
                    },
                    series: [
                        {
                            name: '热负荷',
                            type: 'line',
                            data: [65, 70, 75, 65, 64, 63, 20, 0, 0, 0, 0, 0],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#0E9CFF', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#0E9CFF',
                                },
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [  // 渐变颜色
                                        {
                                            offset: 0,
                                            color: '#0E9CFF',
                                        },
                                        {
                                            offset: 1,
                                            color: '#0E9CFF',
                                        },
                                    ],
                                    global: false,
                                },
                            },
                        },
                        {
                            name: '基线',
                            type: 'line',
                            data: [62, 62, 62, 62, 62, 62, 62, 0, 0, 0, 0, 0],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#33FFA6', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#33FFA6',
                                },
                            },

                        }
                    ]
                },
                znyyrfhoption2: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        data: ['能效比', '基线']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['2021.10', '2021.11', '2021.12', '2022.1', '2022.2', '2022.3', '2022.4', '2022.5', '2022.6', '2022.7', '2022.8', '2022.9'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '单位：m³(㎡· h)',
                            min: 0,
                            max: 5,
                            interval: 1,

                        },
                    ],
                    series: [
                        {
                            name: '能效比',
                            type: 'bar',
                            // tooltip: {
                            //     valueFormatter: function (value) {
                            //         return value + ' ml';
                            //     }
                            // },
                            data: [
                                0, 0, 0, 0, 0, 0, 3.2, 3.3, 4, 4, 3.7, 3.8
                            ]
                        },

                        {
                            name: '基线',
                            type: 'line',

                            data: [0, 0, 0, 0, 0, 0, 3.7, 3.7, 3.7, 3.7, 3.7, 3.7]
                        }
                    ]
                }
                , znyylfhoption3: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['冷负荷', '基线']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021.10', '2021.11', '2021.12', '2022.1', '2022.2', '2022.3', '2022.4', '2022.5', '2022.6', '2022.7', '2022.8', '2022.9']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位 W/m²",
                    },
                    series: [
                        {
                            name: '冷负荷',
                            type: 'line',
                            data: [0, 0, 0, 0, 0, 0, 45, 80, 88, 90, 92, 91],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#0E9CFF', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#0E9CFF',
                                },
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [  // 渐变颜色
                                        {
                                            offset: 0,
                                            color: '#0E9CFF',
                                        },
                                        {
                                            offset: 1,
                                            color: '#0E9CFF',
                                        },
                                    ],
                                    global: false,
                                },
                            },
                        },
                        {
                            name: '基线',
                            type: 'line',
                            data: [0, 0, 0, 0, 0, 0, 0, 87, 87, 87, 87, 87],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#33FFA6', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#33FFA6',
                                },
                            },

                        }
                    ]
                },
                znyytfloption4: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['通风率', '基线']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021.10', '2021.11', '2021.12', '2022.1', '2022.2', '2022.3', '2022.4', '2022.5', '2022.6', '2022.7', '2022.8', '2022.9']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位：m³(㎡· h)",
                    },
                    series: [
                        {
                            name: '通风率',
                            type: 'line',
                            data: [17.5, 20, 5, 4, 17, 17.5, 20, 14, 16, 6, 5, 16],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#0E9CFF', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#0E9CFF',
                                },
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [  // 渐变颜色
                                        {
                                            offset: 0,
                                            color: '#0E9CFF',
                                        },
                                        {
                                            offset: 1,
                                            color: '#0E9CFF',
                                        },
                                    ],
                                    global: false,
                                },
                            },
                        },
                        {
                            name: '基线',
                            type: 'line',
                            data: [15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15],
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#33FFA6', // 折线线条颜色
                                },
                            },
                            itemStyle: {
                                // 设置线条上点的颜色（和图例的颜色）
                                normal: {
                                    color: '#33FFA6',
                                },
                            },

                        }
                    ]
                },
                yuanhuanOption1: {
                    title: {
                        text: '91.9%',
                        left: 'center',
                        top: 61.5,
                        textStyle: {
                            color: '#1890fe'
                        }
                    },
                    visualMap: {
                        show: false,
                    },
                    series: [
                        {
                            type: 'pie',
                            //环形显示饼状图，实际上显示的是50-80之间的部分
                            //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
                            radius: ['50%', '80%'],
                            center: ['50%', '50%'],
                            data: [
                                //itemSyle是单项的背景颜色设置。
                                { value: 91.9, itemStyle: { color: '#0263FF ' } },
                                { value: 8.1, itemStyle: { color: '#70C3FF' } },
                            ],
                            label: {
                                //将视觉引导图关闭
                                show: false,
                            },
                            itemStyle: {
                                //设置的是每项之间的留白
                                borderWidth: 2,
                                borderColor: '#fff'
                            },
                            // 初始化echarts的动画效果
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                },
                yuanhuanOption2: {
                    title: {
                        text: '85.3%',
                        left: 'center',
                        top: 61.5,
                        textStyle: {
                            color: '#1890fe'
                        }
                    },
                    visualMap: {
                        show: false,
                    },
                    series: [
                        {
                            type: 'pie',
                            //环形显示饼状图，实际上显示的是50-80之间的部分
                            //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
                            radius: ['50%', '80%'],
                            center: ['50%', '50%'],
                            data: [
                                //itemSyle是单项的背景颜色设置。
                                { value: 85.3, itemStyle: { color: '#0263FF ' } },
                                { value: 14.7, itemStyle: { color: '#70C3FF' } },
                            ],
                            label: {
                                //将视觉引导图关闭
                                show: false,
                            },
                            itemStyle: {
                                //设置的是每项之间的留白
                                borderWidth: 2,
                                borderColor: '#fff'
                            },
                            // 初始化echarts的动画效果
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                },
                yuanhuanOption3: {
                    title: {
                        text: '71.0%',
                        left: 'center',
                        top: 61.5,
                        textStyle: {
                            color: '#1890fe'
                        }
                    },
                    visualMap: {
                        show: false,
                    },
                    series: [
                        {
                            type: 'pie',
                            //环形显示饼状图，实际上显示的是50-80之间的部分
                            //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
                            radius: ['50%', '80%'],
                            center: ['50%', '50%'],
                            data: [
                                //itemSyle是单项的背景颜色设置。
                                { value: 71, itemStyle: { color: '#0263FF ' } },
                                { value: 29, itemStyle: { color: '#70C3FF' } },
                            ],
                            label: {
                                //将视觉引导图关闭
                                show: false,
                            },
                            itemStyle: {
                                //设置的是每项之间的留白
                                borderWidth: 2,
                                borderColor: '#fff'
                            },
                            // 初始化echarts的动画效果
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                },
                yuanhuanOption4: {
                    title: {
                        text: '66.2%',
                        left: 'center',
                        top: 61.5,
                        textStyle: {
                            color: '#1890fe'
                        }
                    },
                    visualMap: {
                        show: false,
                    },
                    series: [
                        {
                            type: 'pie',
                            //环形显示饼状图，实际上显示的是50-80之间的部分
                            //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
                            radius: ['50%', '80%'],
                            center: ['50%', '50%'],
                            data: [
                                //itemSyle是单项的背景颜色设置。
                                { value: 66.2, itemStyle: { color: '#0263FF ' } },
                                { value: 33.8, itemStyle: { color: '#70C3FF' } },
                            ],
                            label: {
                                //将视觉引导图关闭
                                show: false,
                            },
                            itemStyle: {
                                //设置的是每项之间的留白
                                borderWidth: 2,
                                borderColor: '#fff'
                            },
                            // 初始化echarts的动画效果
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                },
                yuanhuanOption5: {
                    title: {
                        text: '65.4%',
                        left: 'center',
                        top: 61.5,
                        textStyle: {
                            color: '#1890fe'
                        }
                    },
                    visualMap: {
                        show: false,
                    },
                    series: [
                        {
                            type: 'pie',
                            //环形显示饼状图，实际上显示的是50-80之间的部分
                            //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
                            radius: ['50%', '80%'],
                            center: ['50%', '50%'],
                            data: [
                                //itemSyle是单项的背景颜色设置。
                                { value: 65.4, itemStyle: { color: '#0263FF ' } },
                                { value: 34.6, itemStyle: { color: '#70C3FF' } },
                            ],
                            label: {
                                //将视觉引导图关闭
                                show: false,
                            },
                            itemStyle: {
                                //设置的是每项之间的留白
                                borderWidth: 2,
                                borderColor: '#fff'
                            },
                            // 初始化echarts的动画效果
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                },
            }
        },
        methods: {
            selectdivchange(val) {
                // echarts.clear();
                if (val == "服务质量分析") {
                    this.$nextTick(() => {
                        this.ybechartsEcharts();
                        this.dtddsjchartsEcharts();
                        this.pjzcyxsjchartsEcharts();
                    })
                } else if (this.value == "资源效率分析") {
                    this.$nextTick(() => {
                        this.zyxlcharts();
                        this.zhaomingcharts();
                    })
                } else if (this.value == "智能运营分析") {
                    this.$nextTick(() => {
                        this.znyyrfhcharts();
                        this.znyylsjcharts();
                        this.znyylfhcharts();
                        this.znyytflcharts();
                        this.yuanhuanid1charts();
                        this.yuanhuanid2charts();
                        this.yuanhuanid3charts();
                        this.yuanhuanid4charts();
                        this.yuanhuanid5charts();
                    })
                }
            },
            ybechartsEcharts() {
                let myChart1 = echarts.init(this.$refs.ybecharts)
                myChart1.setOption(this.fwoption);
            },
            dtddsjchartsEcharts() {
                let myChart2 = echarts.init(this.$refs.dtddsjzxt)
                myChart2.setOption(this.fwoption1);
            },
            pjzcyxsjchartsEcharts() {
                let myChart3 = echarts.init(this.$refs.pjzcyxsj)
                myChart3.setOption(this.fwoption2);
            },
            zyxlcharts() {
                let myChart4 = echarts.init(this.$refs.ntktszt)
                myChart4.setOption(this.zyxloption);
            },
            zhaomingcharts() {
                let myChart4 = echarts.init(document.getElementById('zhaoming'))
                myChart4.setOption(this.zhaomingoption);
            },
            znyyrfhcharts() {
                let myChart4 = echarts.init(document.getElementById('znyyrfh'))
                myChart4.setOption(this.znyyrfhoption1);
            },
            znyylsjcharts() {
                let myChart4 = echarts.init(document.getElementById('znyylsj'))
                myChart4.setOption(this.znyyrfhoption2);
            },
            znyylfhcharts() {
                let myChart4 = echarts.init(document.getElementById('znyylfh'))
                myChart4.setOption(this.znyylfhoption3);
            },
            znyytflcharts() {
                let myChart4 = echarts.init(document.getElementById('znyytfl'))
                myChart4.setOption(this.znyytfloption4);
            },
            yuanhuanid1charts() {
                let myChart4 = echarts.init(this.$refs.yuanhuanid1)
                myChart4.setOption(this.yuanhuanOption1);
            },
            yuanhuanid2charts() {
                let myChart4 = echarts.init(this.$refs.yuanhuanid2)
                myChart4.setOption(this.yuanhuanOption2);
            },
            yuanhuanid3charts() {
                let myChart4 = echarts.init(this.$refs.yuanhuanid3)
                myChart4.setOption(this.yuanhuanOption3);
            },
            yuanhuanid4charts() {
                let myChart4 = echarts.init(this.$refs.yuanhuanid4)
                myChart4.setOption(this.yuanhuanOption4);
            },
            yuanhuanid5charts() {
                let myChart4 = echarts.init(this.$refs.yuanhuanid5)
                myChart4.setOption(this.yuanhuanOption5);
            },

            init() {
                this.ybechartsEcharts();
                this.dtddsjchartsEcharts();
                this.pjzcyxsjchartsEcharts();
            }
        },
        mounted() {
            this.$nextTick(() => {
                if (this.value == "服务质量分析") {
                    this.init()
                } else if (this.value == "资源效率分析") {
                    this.zyxlcharts();
                    this.zhaomingcharts();
                } else if (this.value == "智能运营分析") {
                    this.znyyrfhcharts();
                    this.znyylsjcharts();
                    this.znyylfhcharts();
                    this.znyytflcharts();
                    this.yuanhuanid1charts();
                    this.yuanhuanid2charts();
                    this.yuanhuanid3charts();
                    this.yuanhuanid4charts();
                    this.yuanhuanid5charts();
                }


            })

        },
    }
</script>

<style scoped lang='scss'>
    /* ------------------------------------------头部 ------------------------------------------*/
    .gohome {
        cursor: pointer;
    }

    .select60div {
        width: 60px;
    }

    .datepicker120px {
        width: 120px;
    }

    .homeicon img {
        position: relative;
        top: 50%;
        /* left: 50%; */
        transform: translate(0, -50%);
        margin-left: 50px;
    }

    .selectdiv {
        position: relative;
        top: 50%;
        /* left: 50%; */
        transform: translate(0, -50%);
        margin-left: 50px;
    }

    .ptname {
        font-size: 36px;
        font-weight: 900;
        color: #ffffff;
        line-height: 100px;
        /* font-style: italic; */
    }

    .header_infor>>>.el-input__inner {
        color: #fff;
        background-color: rgba(0, 0, 0, 0);
    }

    .header_infor {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100px;
        font-size: 16px;
        background-color: #007674;
    }

    .zs_header_content_left_item1 {
        position: relative;
        width: 630px;
        height: 100%;
        display: flex;
        /* flex-direction: row-reverse; */
    }

    .zs_header_content_left_item2 {
        position: relative;
        width: 620px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* ------------------------------------------头部 Eng------------------------------------------*/
    /* <!-------------------------------------------- 综合分析 --------------------------------------------> */


    .header {
        height: 100px !important;
    }

    .el-header {
        height: 100px;
        /* background-color: #102f53; */
        color: #fff;
        padding: 0 0px 0 0px;
        /* margin: -100px 0 0; */
        position: relative;
    }

    .main {
        padding: 30px;
        background-color: #EEEEEE;
    }

    .content {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }

    .left_box {
        width: 50%;
    }

    .right_box {
        width: 50%;
    }

    .left_data_box {
        width: 875px;
        height: 120px;
        background: #ffffff;
        border-radius: 5px;
        padding: 10px 20px 10px 20px;
        display: flex;
        margin-bottom: 10px;
    }

    .img_box {
        width: 190px;
    }

    .img_box>img {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .contentname {
        font-size: 16px;
        color: #333333;
    }

    .shuju_box {
        width: 280px;
    }

    .data_jiantou {
        display: flex;
        justify-content: space-evenly;
        height: 95px;
        align-items: center;
    }

    .baifenbi {
        font-size: 24px;
        color: #000000;
        margin-bottom: 10px;
    }

    .dataunit {
        font-size: 16px;
        color: #333333;
    }

    .jixian {
        width: 220px;
        text-align: center;
    }

    .jixianname {
        font-size: 16px;
        color: #333333;
    }

    .bijiaosj {
        font-size: 16px;
        color: #007674;
        width: 185px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .yuji {
        margin-bottom: 10px;
    }

    .right_content_box {
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }

    .icon_data {
        width: 50%;
        height: 227px;
        display: flex;
    }

    .rimg_box {
        margin-top: 66px;
        margin-left: 78px;
    }

    .rshuju {
        width: 260px;
        text-align: center;
        /* line-height: 227px; */
    }

    .rshuju div {
        /* line-height: 227px; */
    }

    .one_font {
        margin-top: 50px;
        font-size: 26px;
        color: #000000;
    }

    .tow_font {
        /* margin-top: 57px; */
        font-size: 26px;
        color: #000000;
    }

    .font_box {
        margin-bottom: 7px;
    }

    .three_font {
        font-size: 16px;
        color: #000000;
    }

    .four_font {
        font-size: 18px;
        color: #000000;
    }

    .content_top {
        display: flex;
        flex-wrap: wrap;
    }

    .line {
        width: 738px;
        height: 2px;
        background: #E9E9E9;
        margin-left: 89px;
        margin-top: 20px;
    }

    .content_bottom {
        height: 415px;
        width: 100%;
        background: #FFFFFF;
        display: flex;
    }

    .co2img {
        margin: 50px 0 0 78px;
    }

    .font24 {
        font-size: 24px;
        color: #000;
        margin-bottom: 10px;
        text-align: center;
    }

    .font24_box {
        width: 575px;
        /* text-align: center; */
    }

    .fontone24 {
        margin-top: 40px;

    }

    .yuan {
        width: 33px;
        height: 33px;
        color: #fff;
        border-radius: 50%;
        background: #269F9C;
        margin-left: 80px;
        text-align: center;
    }

    .yuan_line {
        display: flex;
        margin-top: 30px;
    }

    /* <!-- ------------------------------------------综合分析 end--------------------------------------------> */

    /* ------------------------------------------服务质量分析------------------------------------------ */
    .fwzlcontent {
        /* display: flex; */
        width: 100%;
        height: 100%;
    }

    .fwzlcontent_top {
        display: flex;
        width: 100%;
    }

    .fwzlcontent_bottom {
        display: flex;
        width: 100%;
        height: 571px;
        margin-top: 20px;
    }

    .snhj {
        width: 650px;
        height: 339px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .lablename {
        font-size: 24px;
        margin: 10px 0 0 20px;
        color: #000;
    }

    .lablenamets {
        font-size: 24px;
        margin: 20px 0 0 20px;
        color: #000;
    }

    .tcccontent {
        display: flex;
        justify-content: space-evenly;
    }

    .lyorsy {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 289px;
        font-size: 24px;
        justify-content: center;
    }


    .lyorsy div {
        margin-bottom: 10px;
    }

    .snhjcontent {
        display: flex;
    }

    .snhjcontentl {
        width: 320px;
        height: 298px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .snhjcontentr {
        width: 330px;
        height: 298px;
    }

    .wdblables {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .ybecharts {
        width: 330px;
        height: 238px;
    }

    .fangkuai1 {
        width: 27px;
        height: 18px;
        background: #40A3FF;
        border-radius: 5px;
        margin-right: 5px;
        align-items: center;
    }

    .fangkuai2 {
        width: 27px;
        height: 18px;
        background: #33FFA6;
        border-radius: 5px;
        margin-right: 5px;
        align-items: center;
    }

    .fangkuai3 {
        width: 27px;
        height: 18px;
        background: #FF5C5C;
        border-radius: 5px;
        margin-right: 5px;
        align-items: center;
    }

    .fklable {
        display: flex;
        font-size: 16px;
        align-items: flex-end;
    }

    .dtddsjzxt {
        width: 100%;
        height: 298px;
    }

    .pjzcyxsj {
        width: 100%;
        height: 530px;
    }

    .snhjdatas {
        font-size: 18px;
        display: flex;
        align-items: center;
    }

    .imgdiv {
        margin-left: 20px;
        width: 40px;
        text-align: center;
    }

    .snhjdatas span {
        margin-left: 20px;
    }

    .dtddsj {
        width: 650px;
        height: 339px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .tingchechang {
        width: 520px;
        height: 339px;
        background: #fff;
        border-radius: 5px;
        /* margin-right: 20px; */
    }

    .znzm {
        width: 650px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .pjzc {
        width: 1190px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
    }

    .ntktszt {
        width: 520px;
        height: 304px;
    }

    .table {
        padding: 20px;
        font-size: 16px;
        width: 610px;
        height: 490px;
    }

    .tabledanwei {
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* --------------------------------服务质量分析 End------------------------------------------ */
    /* --------------------------------资源效率分析 ------------------------------------------ */
    .zyxlcontent {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .zyxl_left_one,
    .zyxl_left_two {
        width: 1320px;
        height: 160px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .mzyxlnrbox {
        display: flex;
        justify-content: space-around;
    }

    .zyxlnrbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 160px;
        justify-content: space-evenly;
        font-size: 22px;

    }

    .width320 {
        width: 320px;
    }

    .width440 {
        width: 440px;
    }

    .fgxian {
        width: 2px;
        height: 74px;
        border-radius: 1px;
        background: #DDDDDD;
    }

    .luse {
        color: #007674;
    }

    .fontsize16 {
        font-size: 16px;
    }

    .zyxl_left_three {
        display: flex;
    }

    .three_box1 {
        width: 830px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .dnhl {
        width: 310px;
        margin-left: 30px;
        height: 525px;
    }

    .dnhr {
        width: 380px;
        margin-left: 80px;
        height: 525px;
    }

    .anxitong {
        margin-top: 8px;
    }

    .three_box2 {
        width: 470px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
    }

    .three_box2_data {
        padding: 0 20px;
    }

    .zyxl_right {
        margin-left: 20px;
    }

    .zyxl_right_one {
        width: 520px;
        height: 200px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: 24px;
    }

    .fengexian {
        width: 2px;
        height: 104px;
        background: #DDDDDD;
    }

    .rrsormj {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 90px;
    }

    .zyxl_right_tow {
        width: 520px;
        height: 345px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
    }

    .zyxl_right_three {
        width: 520px;
        height: 345px;
        background: #fff;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
    }

    .zhaoming {
        width: 520px;
        height: 304px;
    }

    /* --------------------------------资源效率分析 End------------------------------------------ */
    /* --------------------------------智能运营分析 ------------------------------------------ */
    .znyycontent {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .znyy_left {
        display: flex;
        width: 1410px;
        flex-wrap: wrap;
    }

    .rfh_box,
    .lfjz_box,
    .lfh_box,
    .xfl_box {
        width: 685px;
        height: 455px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .znyylfh,
    .znyytfl,
    .znyyrfh,
    .znyylsj {
        width: 645px;
        height: 374px;
        padding: 20px;
    }

    .znyy_right {
        width: 450px;
        height: 930px;
        background: #fff;
        border-radius: 5px;
    }

    .liyonglubox {
        width: 450px;
        height: 177.8px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .yuanhuan1 {
        width: 150px;
        height: 150px;
    }

    .yhlable {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24px;
    }

    .yhlablediv {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .yhxbtn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FF5C5C;
        font-size: 16px;
    }

    .yhxbtn div {
        margin-bottom: 10px;
    }


    /* --------------------------------智能运营分析 End------------------------------------------ */

    /* 滚动条 */
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }

    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
        background: #78b4b4;
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
        border-radius: 10px;
        background: #ededed;
    }

    /* 滚动条 end */
</style>